<template>
  <div class="studyBox">
    <!-- 试题部分 -->
    <div class="left">
      <div class="leftTop">
        <div v-for="(item, index) in studyAll" :key="index">
          <div class="studyItem">
            <div class="num">{{ item[0] }}</div>
            <div class="ufunc">{{ item[1] }}</div>
            <div class="num">{{ item[2] }}</div>
            <div class="ufunc">{{ item[3] }}</div>
            <div class="num">{{ item[4] }}</div>
            <div class="getResult">=</div>
            <div class="resultNum" v-show="isShowResult">{{ item[5] }}</div>
          </div>
        </div>
      </div>
      <div class="leftBottom">
        <div class="desItem">
          <div class="lebel">时间</div>
          <div class="lebel">分数</div>
          <div class="lebel">用时</div>
        </div>
        <div class="desItem">
          <div class="lebel">时间</div>
          <div class="lebel">分数</div>
          <div class="lebel">用时</div>
        </div>
      </div>
    </div>
    <!-- 操作部分 -->
    <div class="right">
      <div class="rightItem">
        <el-button type="primary" @click="get50Arr">50 内乘除法</el-button>
        <el-button type="primary" @click="get100Arr">100 内乘除法</el-button>
        <el-button type="primary" @click="get200Arr">200 内乘除法</el-button>
      </div>
      <div class="rightItem">
        <el-button type="primary" @click="getStudyArr">试 题</el-button>
        <el-button type="success" @click="getResult">答 案</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ufuncArrAll: ['+', '-', 'x', '÷'], // 运算法则 所有
      ufuncArr1: ['x', '÷'], // 运算法则 乘除
      ufuncArr2: ['+', '-'], // 运算法则 加减
      studyAll: [], // 所有习题数组
      isShowResult: false, // 是否显示答案
      studyType: 50,
    }
  },
  created() { },
  computed: {},
  mounted() {
    this.getStudyAll()
  },
  methods: {
    getStudyAll() {
      this.studyAll = []
      for (let i = 1; i <= 40; i++) {
        // 随机得到 ufuncArrAll 运算规则
        let ufunc1 = ''
        let index1 = Math.floor(Math.random() * this.ufuncArrAll.length)
        ufunc1 = this.ufuncArrAll[index1]
        if (ufunc1 == 'x' || ufunc1 == '÷') {
          // 随机得到 一个 1-9 的随机数
          let num2 = Math.floor(Math.random() * 9 + 1) + 1
          // 根据 num2 和左侧运算规则 得到 num1 的取值范围
          let num1Max = Math.floor(this.studyType / num2)
          // 随机得到 x 和 ÷ 的小范围计算规则
          let studyCC = []
          if (ufunc1 == 'x') {
            let num1 = Math.floor(Math.random() * (num1Max - 1) + 1) + 1
            studyCC[3] = num1 * num2
            studyCC[0] = num1
            studyCC[1] = 'x'
            studyCC[2] = num2
          } else if (ufunc1 == '÷') {
            let result = Math.floor(Math.random() * num1Max + 1)
            studyCC[3] = result
            studyCC[0] = result * num2
            studyCC[1] = '÷'
            studyCC[2] = num2
          }
          // studyCC的位置 默认在前面
          let ccPosArr = ['before', 'after']
          let ccPos = Math.floor(Math.random() * ccPosArr.length)
          if (ccPosArr[ccPos] == 'before') {
            // 随机得到 另外一个 运算规则
            let ufunc2 = ''
            let index2 = Math.floor(Math.random() * this.ufuncArr2.length)
            ufunc2 = this.ufuncArr2[index2]
            if (ufunc2 == '+') {
              // 根据 studyCC 和 ccPosArr[ccPos] 和 ufunc2 得到 num3 的取值范围
              let num3Max = this.studyType - studyCC[3]
              // 随机得到 num3
              let num3 = Math.floor(Math.random() * num3Max + 1)
              let result = studyCC[3] + num3
              let pushResult = studyCC.slice(0, 3).concat([ufunc2, num3, result])
              this.studyAll.push(pushResult)
            } else if (ufunc2 == '-') {
              // 随机得到 num3
              let num3 = Math.floor(Math.random() * studyCC[3])
              let result = studyCC[3] - num3
              let pushResult = studyCC.slice(0, 3).concat([ufunc2, num3, result])
              this.studyAll.push(pushResult)
            }
          } else if (ccPosArr[ccPos] == 'after') {
            // 随机得到 另外一个 运算规则
            let ufunc2 = ''
            let index2 = Math.floor(Math.random() * this.ufuncArr2.length)
            ufunc2 = this.ufuncArr2[index2]
            if (ufunc2 == '+') {
              // 根据 studyCC 和 ccPosArr[ccPos] 和 ufunc2 得到 num3 的取值范围
              let num3Max = this.studyType - studyCC[3]
              // 随机得到 num3
              let num3 = Math.floor(Math.random() * num3Max + 1)
              let result = num3 + studyCC[3]
              let pushResult = [num3, ufunc2].concat(studyCC.slice(0, 3)).concat([result])
              this.studyAll.push(pushResult)
            } else if (ufunc2 == '-') {
              // 随机得到 num3
              let num3 = Math.floor(Math.random() * (this.studyType - studyCC[3]) + studyCC[3] + 1)
              let result = num3 - studyCC[3]
              let pushResult = [num3, ufunc2].concat(studyCC.slice(0, 3)).concat([result])
              this.studyAll.push(pushResult)
            }
          }
        } else if (ufunc1 == '+' || ufunc1 == '-') {
          let studyCC = []
          if (ufunc1 == '+') {
            let num1Min = Math.floor(this.studyType / 3)
            let num1Max = Math.floor(this.studyType / 3) * 2
            let num1 = Math.floor(Math.random() * (num1Max - num1Min) + num1Min + 1)
            let num2 = Math.floor(Math.random() * (this.studyType - num1) + 1)
            studyCC[0] = '( ' + num1
            studyCC[1] = '+'
            studyCC[2] = num2 + ' )'
            studyCC[3] = num1 + num2
          } else if (ufunc1 == '-') {
            let num1Min = Math.floor(this.studyType / 3)
            let num1 = Math.floor(Math.random() * (this.studyType - num1Min) + num1Min + 2)
            let num2 = Math.floor(Math.random() * (num1 - 1))
            studyCC[0] = '( ' + num1
            studyCC[1] = '-'
            studyCC[2] = num2 + ' )'
            studyCC[3] = num1 - num2
          }
          if (studyCC[3] > this.studyType / 2) {
            let num3Arr = []
            for (let i = 2; i <= studyCC[3]; i++) {
              if (studyCC[3] % i == 0) { num3Arr.push(i) }
            }
            let num3Index = Math.floor(Math.random() * num3Arr.length)
            let num3 = num3Arr[num3Index]
            let num4 = studyCC[3] / num3
            let pushResult = studyCC.slice(0, 3).concat(['÷', num3, num4])
            this.studyAll.push(pushResult)
          } else {
            // studyCC的位置 默认在前面
            let ccPosArr = ['before', 'after']
            let ccPos = Math.floor(Math.random() * ccPosArr.length)
            // 随机得到 另外一个 运算规则
            let ufunc2 = ''
            let index2 = Math.floor(Math.random() * this.ufuncArr1.length)
            ufunc2 = this.ufuncArr1[index2]
            if (ufunc2 == 'x') {
              let num3Max = Math.floor(this.studyType / studyCC[3])
              let num3 = Math.floor(Math.random() * num3Max + 1) + 1
              let num4 = studyCC[3] * num3
              if (ccPosArr[ccPos] == 'before') {
                let pushResult = studyCC.slice(0, 3).concat(['x', num3, num4])
                this.studyAll.push(pushResult)
              } else if (ccPosArr[ccPos] == 'after') {
                let pushResult = [num3, 'x'].concat(studyCC.slice(0, 3)).concat([num4])
                this.studyAll.push(pushResult)
              }
            } else if (ufunc2 == '÷') {
              if (ccPosArr[ccPos] == 'before') {
                let num3Arr = []
                for (let i = 2; i <= studyCC[3]; i++) {
                  if (studyCC[3] % i == 0) { num3Arr.push(i) }
                }
                let num3Index = Math.floor(Math.random() * num3Arr.length)
                let num3 = num3Arr[num3Index]
                let num4 = studyCC[3] / num3
                let pushResult = studyCC.slice(0, 3).concat(['÷', num3, num4])
                this.studyAll.push(pushResult)
              } else if (ccPosArr[ccPos] == 'after') {
                let num3Max = Math.floor(this.studyType / studyCC[3])
                let num4 = Math.floor(Math.random() * num3Max + 1) + 1
                let num3 = num4 * studyCC[3]
                let pushResult = [num3, '÷'].concat(studyCC.slice(0, 3)).concat([num4])
                this.studyAll.push(pushResult)
              }
            }
          }
        }
      }
    },
    // 50 内加减法 点击事件
    get50Arr() {
      this.studyType = 50
      this.isShowResult = false
      this.getStudyAll()
    },
    // 100 内加减法 点击事件
    get100Arr() {
      this.studyType = 100
      this.isShowResult = false
      this.getStudyAll()
    },
    // 200 内加减法 点击事件
    get200Arr() {
      this.studyType = 200
      this.isShowResult = false
      this.getStudyAll()
    },
    // 试题 点击事件
    getStudyArr() {
      this.isShowResult = false
    },
    // 答案 点击事件
    getResult() {
      this.isShowResult = true
    }
  }
}
</script>

<style scoped>
.studyBox {
  display: flex;
}
.left {
  width: 1500px;
  height: 1050px;
  border: 1px solid #666;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 20px;
  margin-left: 100px;
}
.leftTop {
  width: 100%;
  height: 90%;
  /* border: 1px solid green; */
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.studyItem {
  width: 350px;
  height: 80px;
  border-bottom: 1px solid #aaa;
  /* border: 1px solid red; */
  display: flex;
  align-items: flex-end;
  font-size: 25px;
  text-align: center;
  line-height: 60px;
}
.num {
  width: 60px;
  height: 60px;
  /* border: 1px solid blue; */
}
.showNum {
  border: 1px solid #aaa;
  border-bottom: none;
}
.ufunc {
  width: 25px;
  height: 60px;
  /* border: 1px solid blue; */
  font-size: 33px;
  color: red;
}
.getResult {
  width: 25px;
  height: 60px;
  /* border: 1px solid blue; */
  font-size: 30px;
}
.resultNum {
  width: 70px;
  height: 60px;
  /* border: 1px solid blue; */
}
.leftBottom {
  width: 100%;
  height: 100px;
  /* border: 1px solid black; */
  font-size: 25px;
  line-height: 100px;
  display: flex;
  justify-content: space-around;
}
.desItem {
  width: 48%;
  height: 100px;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-around;
}
.desItem > .lebel {
  width: 32%;
  height: 100px;
}
.right {
  width: 500px;
  height: 500px;
  border: 1px solid green;
  text-align: center;
  margin-top: 100px;
  margin-left: 100px;
  font-size: 25px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rightItem {
  width: 500px;
  height: 120px;
  /* border: 1px solid red; */
  line-height: 120px;
}
</style>
